import React, { Component, Fragment } from "react";
import {withRouter} from 'react-router-dom';
import {reg_password} from '../../utils/validate';
// ANTD
import { Form, Input, Button, Row, Col } from 'antd';
import { UserOutlined, UnlockOutlined  } from '@ant-design/icons';
// API
import {Login} from "../../api/account";

import Code from "../../components/code";
// 加密
import CryptoJs from 'crypto-js';
// 工具类
import {setToken, setUsername} from '../../utils/cookies';
class LoginForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            username: "",
            password: "",
            code: "",
            module: "login",
            loading: false };
    }
    onFinish = (values) => {
        this.setState({
            ...this.state,
            loading:true
        })
        values.password = CryptoJs.MD5(values.password).toString();
        Login(values).then(e=>{
            this.setState({
                ...this.state,
                loading:false
            })
            const {token, username} = e.data;
            setToken(token);
            setUsername(username)
            this.props.history.push('/index');
        }).catch(()=>{
            this.setState({
                ...this.state,
                loading:false
            })
        })
    };
    toggleForm = () => {
        // 调父级的方法
        this.props.switchForm("register");
    }
    // 处理表单输入
    changeUserForm = (e,type)=>{
        this.setState({
            ...this.state,
            [type]:e.target.value
        })
    }
    render(){
        const { username, module, loading } = this.state;
        return (
            <Fragment>
                <div className="form-header">
                    <h4 className="column">登录</h4>
                    <span className={'finger'} onClick={this.toggleForm}>帐号注册</span>
                </div>
                <div className="form-content">
                    <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    >
                        <Form.Item name="username" rules={
                            [
                                { required: true, message: "邮箱不能为空" },
                                { type: "email", message: "邮箱格式不正确"}
                            ]
                        }>
                            <Input value={username} onChange={e=>this.changeUserForm(e,'username')} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="email" />
                        </Form.Item>
                        <Form.Item rules={
                            [
                                { required: true, message: '密码不能为空' },
                                {pattern:reg_password,message: '密码必须大于6位小于20位，数字+字母'}
                            ]
                        } name="password">
                            <Input type="password" onChange={e=>this.changeUserForm(e,'password')}  prefix={<UnlockOutlined className="site-form-item-icon" />} placeholder="Password" />
                        </Form.Item>
                        <Form.Item rules={
                            [
                                { required: true, message: '验证码不能为空' },
                                { len: 6, message: '请输入6位验证码' }
                            ]
                        } name="code"  >
                            <Row gutter={13}>
                                <Col span={15}>
                                    <Input onChange={e=>this.changeUserForm(e,'code')}  prefix={<UnlockOutlined className="site-form-item-icon" />} placeholder="Code" />
                                </Col>
                                <Col span={9}>
                                    <Code username={username} module={module} />
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" loading={loading} htmlType="submit" className="login-form-button" block> 登录 </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Fragment>
        )
    }
}


export default withRouter(LoginForm)
